<template>
	<view class="serve">
		<!-- 状态栏 -->
		<view class="status_bar"></view>
		<!-- 头部 -->
		<view class="hearder">
			<view class="place" @click="getArea">
				<u-icon name="map-fill" size="40rpx"></u-icon>
				<text>郑州市</text>
				<u-icon class="icdown" name="arrow-down-fill" color="#A5A5A5" size="20rpx"></u-icon>
			</view>
			<view class="seek" @click="Tosearch">
				<u-search placeholder="请选择你想要的服务" v-model="keyword" :show-action="false" search-icon-color="#979797">
				</u-search>
			</view>
		</view>
		<!-- 内容 -->
		<view class="main" :style="{height:(wh-110)+'px'}">
			<!-- 左 -->
			<scroll-view class="serve-left" :style="{height:(wh-130)+'px'}">
				<view class="serve-left-box">
					<block v-for="(item,index) in ProductTy" :key="index">
						<view :class="['left-item',index === active ? 'active' : '']" @click="doProductitem(index)">
							{{item.name}}
						</view>
					</block>
				</view>
			</scroll-view>
			<!-- 右 -->
			<scroll-view class="serve-right">
				<text class="title">{{ProductTwo.name}}</text>
				<view class="item-box">
					<view class="items" v-for="(item,index) in ProductTwo.child" :key="item.id"
						@click="ToSerList(item.id,index)">
						<u-image width="114rpx" height="123rpx" shape="circle" :src="item.image"></u-image>
						<text class="title-therr">{{item.name}}</text>
					</view>
				</view>

			</scroll-view>
		</view>

		<!-- 地区 -->
		<!-- <u-select v-model="AreaShow" mode="mutil-column-auto" :list="Area" @confirm="confirm"></u-select> -->
		<u-picker mode="multiSelector" v-model="AreaShow" :default-selector='[0, 0]' :range="Area"
			range-key="shortname">
		</u-picker>
	</view>
</template>

<script>
	import { ResProductTy, Resarea } from '@/untils/api.js'

	export default {
		data() {
			return {
				active: 0,
				wh: '',
				keyword: '',
				ProductTy: [], // 一级
				ProductTwo: [], // 一级每一项
				AreaShow: false
			}
		},
		onShow() {
			// 获取页面可操作高度
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
		},
		onHide() {
			// 页面隐藏后将下标再次为0并渲染数据
			this.active = 0
			this.ProductTwo = this.ProductTy[this.active]
		},
		onLoad() {
			this.getProductTy()
			// 页面加载拿到分类的下标去渲染数据
			uni.$on('getIndex', (data) => {
				this.active = data
				this.ProductTwo = this.ProductTy[this.active]
			})
		},
		methods: {
			Tosearch() {
				this.keyword = ''
				uni.navigateTo({
					url: '/pages/Home/Search'
				})
			},
			// 地区选择
			async getArea() {
				const { data: res } = await Resarea()
				console.log(res, '222');
				this.Area = res.data
				this.AreaShow = true
			},

			// 页面跳转
			ToSerList(id, index) {
				console.log(index);
				uni.navigateTo({
					url: `/pages/Serve/ServeList?idone=${this.ProductTwo.id}&idtwo=${id}&index=${index}`
				})
			},
			// 发送请求获取数据
			async getProductTy() {
				const { data: res } = await ResProductTy()
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.ProductTy = res.data
				this.ProductTwo = res.data[0]
			},
			// 点击一级渲染二级数据
			doProductitem(index) {
				this.active = index
				this.ProductTwo = this.ProductTy[index]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.serve {

		// 公共
		.title {
			font-weight: 600;
			font-size: 30rpx;
		}

		// 头部
		.hearder {
			padding: 18rpx 30rpx;
			display: flex;
			justify-content: space-between;

			.place {
				display: flex;
				align-items: center;

				.icdown {
					margin-left: 10rpx;
				}
			}
		}

		// 内容
		.main {
			background-color: #F7F7F7;
			padding: 20rpx;
			display: flex;

			.serve-left {
				width: 204rpx;

				.serve-left-box {
					padding-left: 20rpx;

					.left-item {
						font-size: 30rpx;
						font-weight: 600;
						line-height: 80rpx;
						margin-bottom: 40rpx;
					}


					.active {
						color: #01C3A8;
					}

				}
			}

			.serve-right {
				width: 521rpx;
				height: 601rpx;
				padding: 28rpx 58rpx 54rpx 56rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;

				.item-box {
					display: flex;
					flex-wrap: wrap;

					.items {
						width: 114rpx;
						margin-top: 50rpx;
						margin-right: 30rpx;
						display: flex;
						flex-direction: column;
						text-align: center;
						font-size: 22rpx;

						.title-therr {
							margin-top: 25rpx;
						}
					}
				}

			}

		}
	}
</style>
